<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myclock"></div>
    <script>
        // 属性 

        // 元素  传入选择器 

        // 方法 :
        //  获取最新的时间 并且将这个时间显示在元素内部  
        //  需要一个方法 实时调用上面的方法 
        //  需要一个方法 停止时间往前走


        class Clock{
            constructor(selector){
                this.ele = document.querySelector(selector);
                this.t = 0
            }


            update_time(){
                const now = new Date();
                const hour = now.getHours().toString().padStart(2,'0');
                const minutes = now.getMinutes().toString().padStart(2,'0');
                const seconds = now.getSeconds().toString().padStart(2,'0');
                this.ele.innerText = `${hour}:${minutes}:${seconds}`
            }

            start(){
                this.update_time(); // 先更新一次 
                this.t = setInterval(()=>{
                    this.update_time();
                },1000)
            }
            stop(){
                clearInterval(this.t)
            }
        }

        const c1 = new Clock('#myclock');
        c1.start()
    </script>
</body>
</html>